<template>
  <div class="container">
    <el-page-header @back="goBack" content="小哥级别"></el-page-header>

    <el-row type="flex" justify="space-between" class="nav-bar">
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-plus" plain @click="create">新建</el-button>
      </el-col>
      <el-col class="text-right">
        <el-form :inline="true" label-width="auto" class="nav-bar-form">
          <el-form-item>
            <el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search" @clear="getList">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column fixed prop="name" label="小哥级别">
      </el-table-column>
      <el-table-column prop="commission" label="佣金(%)" width="150">
      </el-table-column>
      <el-table-column prop="maxloss" label="最高亏损比(%)" width="150">
      </el-table-column>
      <el-table-column prop="isdefault" label="是否默认" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.isdefault?'是':'否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="receivingtimelimit" label="接单超时时限(客户组：分钟)" width="200">
      </el-table-column>

      <!-- <el-table-column prop="state" label="状态" width="200">
				<template slot-scope="scope">
					<span class="color-success" v-if="scope.row.state == '已启用'">{{ scope.row.state }}</span>
					<span class="color-danger" v-if="scope.row.state == '已隐藏'">{{ scope.row.state }}</span>
				</template>
			</el-table-column> -->
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <!-- <el-button @click="create(scope.row)" type="text" size="small">修改</el-button> -->
          <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="table-pagination">
      <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <el-dialog :title="dialogType == 'add' ? '新建级别' : '编辑级别'" :visible.sync="dialogVisible" width="540px">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="级别名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="佣金(%)" prop="commission">
          <el-input v-model="form.commission" type="number"></el-input>
        </el-form-item>
        <el-form-item label="最高亏损比(%)" prop="maxloss">
          <el-input v-model="form.maxloss" type="number"></el-input>
        </el-form-item>
        <el-form-item label="是否默认">
          <el-switch v-model="form.isdefault"></el-switch>
        </el-form-item>
        <el-form-item label="接单超时时限(客户组：分钟)" prop="receivingtimelimit">
          <el-input v-model="form.receivingtimelimit" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitType">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    layout: 'admin',
    head() {
      return {
        title: '小哥级别' 
      }
    },
    data() {
      return {
        key: '',
        page: 1,
        pageSize: 10,
        loading: false,
        total: 0,
        dialogVisible: false,
        dialogType: 'add',
        paywayList: [{
            name: '微信',
            value: '5'
          },
          {
            name: '支付宝',
            value: '4'
          },
          {
            name: '银行账户',
            value: '3'
          },
          {
            name: '现金',
            value: '2'
          },
          {
            name: '其他',
            value: '1'
          }
        ],
        form: {
          name: "", // 名称
          commission: 0, // 佣金
          maxloss: 0, // 最高亏损比
          isdefault: false, // 是否默认
          receivingtimelimit: 0, // 接单超时时限(客户组：分钟)
        },
        rules: {
          name: [{
            required: true,
            message: '请输入级别名称',
            trigger: 'blur'
          }, ],
          commission: [{
              required: true,
              message: '请填写佣金百分比',
              trigger: 'blur'
            },
            {
              type: 'number',
              message: "佣金百分比0.01~99.99%",
              min: 0.01,
              max: 99.99,
              trigger: 'blur',
              transform: Number,
            }
          ],
          maxloss: [{
              required: true,
              message: '请填写最高亏损比',
              trigger: 'blur'
            },
            {
              type: 'number',
              message: "最高亏损比0.01~99.99%",
              min: 0.01,
              max: 99.99,
              trigger: 'blur',
              transform: Number,
            }
          ],
          receivingtimelimit: [{
              required: true,
              message: '请填写接单超时时限',
              trigger: 'blur'
            },
            {
              type: 'number',
              message: "接单超时时限5~1000000000",
              min: 5,
              max: 1000000000,
              trigger: 'blur',
              transform: Number,
            }
          ],
        },
        tableData: []
      }
    },
    watch: {
      dialogVisible(value) {
        if (!value) {
          this.form = {
            name: "",
            commission: 0,
            maxloss: 0,
            isdefault: false,
            receivingtimelimit: 0,
          }
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      getList() {
        this.$axios.post('/Admin/Brother/Level/List', {
          "PageIndex": this.page,
          "PageSize": this.pageSize,
          "Key": this.key
        }).then((res) => {
          this.tableData = res.rows;
          // this.total = res.total;
        })
      },
      submitType() {
        let api = ''
        if (this.dialogType == 'add') {
          api = '/Admin/Brother/Level/create'
        }
        if (this.dialogType == 'edit') {
          api = '/Admin/Brother/Level/edit'
        }

        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$axios.post(api, this.form).then((res) => {
              this.$message.success(res.msg);
              this.dialogVisible = false;
              this.getList()
            })
          } else {
            return false;
          }
        });

      },
      create() {
        this.dialogType = 'add'
        this.dialogVisible = true
      },
      edit(row) {
        console.log(row)
        this.dialogType = 'edit'
        this.dialogVisible = true
        this.form.id = row.id
        this.form.name = row.name
        this.form.commission = row.commission
        this.form.maxloss = row.maxloss
        this.form.isdefault = row.isdefault
        this.form.receivingtimelimit = row.receivingtimelimit
      },
      search() {
        this.getList()
      },
      pageChange(e) { // 页码切换事件
        this.page = e;
        this.getList()
      },
      handleSizeChange(val) {
        this.page = 1;
        this.pageSize = val;
        this.getList()
      },
      del(id) {
        this.$confirm('此操作将删除该小哥级别, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get('/Admin/Brother/Level/delete?Id=' + id).then((res) => {
            this.$message.success(res.msg);
            this.getList()
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .nav-bar {
    padding: 45px 0 0;
  }

  .send {
    margin-top: 15px;
    margin-right: 10px;
  }

  .dialogForm {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      width: 50%;
      float: left;

      &.all {
        width: 100%;
      }

      .el-select {
        width: 100%;
      }
    }
  }
</style>
